<template>
    <div>//v-bind</div>
    <div>
        <img src="list[index]" alt="">
    </div>
    <button v-show="prev" :disabled="index === 0">上一页</button>
    <button v-show="next" :disabled="index === list.length - 1">下一页</button>
</template>
<script setup>
    import {ref} from 'vue';
    const list = ref([
        './img/101.jpg',
        './img/102.jpg',
        './img/103.jpg',
        './img/104.jpg',
        './img/105.jpg',
    ]);
    const index = ref(0);

    // 定义上一页,下一页
    function prev() {
        index.value--;
    }
    function next() {
        index.value++;
    }

</script>
<style scoped>

</style>